<script>
import { emojiNames, emojiPaths } from '@/emoji';
import { Button } from 'vant';

export default {
  components: {
    Button
},
  computed: {
    names: () => emojiNames,
    paths: () => emojiPaths
  },
  data() {
    return {
    }
  },
  methods: {
  },
}
</script>

<template>
  <div class="emoji-selector">
    <div class="emoji-list">
      <div
        v-for="name in names"
        :key="name"
        @click="$emit('select', name)"
      >
        <img :src="paths[name]" alt="">
      </div>
    </div>

    <!-- <div class="emoji-buttons">
      <Button size="small">删除</Button>
      <Button size="small">发送</Button>
    </div> -->
  </div>
</template>

<style lang="less" scoped>
.emoji-selector {
  position: relative;

  .emoji-buttons {
    display: flex;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 5px;
    background-color: #eeeeee;
    box-shadow: 0 0 15px #eeeeee;
  }
}

.emoji-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  place-items: center;
  height: 200px;
  overflow-y: auto;
  padding: 15px 10px;
}
</style>
